<script setup lang="ts">
import { ref, onMounted } from 'vue';
//@ts-ignore
import { Search } from '@element-plus/icons-vue';

// 直接使用可靠的网络图片
const carouselImages = [
  {
    url: 'https://ts1.tc.mm.bing.net/th/id/R-C.fda2dc823d7c14a45ab6b9de290a1776?rik=FwMA3m0kUdAcHA&riu=http%3a%2f%2fy2.ifengimg.com%2f76f307b64d2fbac7%2f2013%2f0513%2frdn_51909dd34cf7f.jpg&ehk=p5QBRARJHJ%2fFfclZFODR4xPP50ewUfjGmkxVWszVZLI%3d&risl=&pid=ImgRaw&r=0',
    title: '探索世界的每个角落',
    subtitle: '发现令人惊叹的旅行目的地'
  },
  {
    url: 'https://ts1.tc.mm.bing.net/th/id/R-C.2e30a6967eb270f9bf132c35affd58bb?rik=sgwQSmvyHfdYqw&riu=http%3a%2f%2fpic.qianye88.com%2f4kfengjingcf33d451-9bfb-3853-85ae-dcaabe962a42.jpg&ehk=p%2bWokJZauNjEYkKNY7dXdrPGG1EnkEQ7FJsw586ekM4%3d&risl=&pid=ImgRaw&r=0',
    title: '开始你的奇妙旅程',
    subtitle: '记录完美的旅行瞬间'
  },
  {
    url: 'https://ts1.tc.mm.bing.net/th/id/R-C.4cea1595af37cd500c96449089066e90?rik=AOHWw9PQTeDdzQ&riu=http%3a%2f%2fwww.7jiaqi.com%2fUpload%2f%E5%B2%9B%E5%B1%BF%E5%9B%BE%E7%89%87%2fhurawalhi%2f%E6%B8%B8%E8%AE%B0%2f08+03%E6%90%AC+%E5%A4%A9%E5%A0%82%E8%88%AC%E7%9A%84%E6%B5%B7+%E8%B0%9C%E4%B8%80%E6%A0%B7%E7%9A%84Hurawalhi+%E9%A9%AC%E4%BB%A3%E8%8A%99%E6%8B%89%E7%93%A6%E5%88%A9%E8%9C%9C%E6%9C%88%E4%B9%8B%E6%97%85%2f20170803_144514_001.jpeg&ehk=jkHgxdcMSa4sCh21ojiblVgNOurmgKGvNK5S6UCUH3I%3d&risl=&pid=ImgRaw&r=0',
    title: '找到完美的度假胜地',
    subtitle: '享受难忘的假期体验'
  }
];

const imageLoaded = ref(true);

onMounted(() => {
  // 预加载图片
  carouselImages.forEach(item => {
    const img = new Image();
    img.src = item.url;
  });
});
</script>

<template>
  <div class="hero">
    <el-carousel :interval="5000" height="500px" indicator-position="outside" arrow="always">
      <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
        <div 
          class="hero-slide" 
          :style="{ backgroundImage: `url('${item.url}')` }"
        >
          <div class="hero-overlay"></div>
          <div class="hero-content">
            <h1>{{ item.title }}</h1>
            <p class="hero-subtitle">{{ item.subtitle }}</p>
            <div class="search-form">
              <div class="search-input">
                <el-input placeholder="输入目的地" :prefix-icon="Search">
                  <template #prefix>
                    <span class="search-icon">🔍</span>
                  </template>
                </el-input>
              </div>
              <div class="search-input">
                <el-date-picker type="date" placeholder="选择日期" format="YYYY/MM/DD">
                  <template #prefix>
                    <span class="search-icon">📅</span>
                  </template>
                </el-date-picker>
              </div>
              <div class="search-input">
                <el-select placeholder="旅行人数">
                  <template #prefix>
                    <span class="search-icon">👥</span>
                  </template>
                  <el-option v-for="i in 10" :key="i" :label="`${i}人`" :value="i" />
                </el-select>
              </div>
              <el-button type="primary" class="search-btn">搜索</el-button>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped>
.hero {
  position: relative;
  color: white;
  margin-bottom: 30px;
  width: 100%;
  min-height: 500px;
}

.hero-slide {
  position: relative;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.hero-content {
  z-index: 1;
  width: 100%;
  max-width: 800px;
  padding: 0 20px;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
  font-size: 1.2rem;
  margin-bottom: 30px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.search-form {
  display: flex;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 180px;
  padding: 5px;
}

.search-input :deep(.el-input__wrapper),
.search-input :deep(.el-input__inner) {
  width: 100%;
}

.search-icon {
  margin-right: 5px;
}

.search-btn {
  min-width: 120px;
  margin: 5px;
  height: 40px;
}

/* 自定义carousel样式 */
:deep(.el-carousel__item) {
  overflow: hidden;
  width: 100%;
}

:deep(.el-carousel__arrow) {
  background-color: rgba(0, 0, 0, 0.3);
  font-size: 20px;
}

:deep(.el-carousel__indicators) {
  z-index: 10;
}

:deep(.el-carousel__container) {
  height: 500px !important;
  width: 100%;
}

:deep(.el-carousel) {
  width: 100%;
}

:deep(.el-carousel__item) {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
    padding: 10px;
  }
  
  .search-input {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .search-btn {
    width: 100%;
    margin: 5px 0;
  }
}
</style>